/*Add to functions.php */
function theme_enqueue_scripts() {
    wp_enqueue_script('jquery');
}
add_action('wp_enqueue_scripts', 'theme_enqueue_scripts');


function custom_top_bar_idc() {
    ?>
   <div id="top-bar-idc">
    <div class="marquee-idc">
        <b>Email</b>: <a href="mailto:info@letslearnwordpress.com">info@letslearnwordpress.com</a>&#160;|&#160;<b> Phone</b>: <a href="tel:123456789">+123456789</a>
        <a class="link-whatsapp" title="WhatsApp" href="https://wa.me/123456789" target="_blank" rel="noopener">&#160;<img src="https://..........." width="30" height="30" /></a>
    </div>
</div>

    <script>
        jQuery(document).ready(function($) {
            $('.marquee-idc').hover(function() {
                $(this).css('animation-play-state', 'paused');
            }, function() {
                $(this).css('animation-play-state', 'running');
            });
        });
    </script>
    <?php
}
add_action('wp_head', 'custom_top_bar_idc');



/* CSS for top bar */
#top-bar-idc {
    background-color: #000000;
    color: #ffffff;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 35px;
    z-index: 9999;
    display: flex;
    justify-content: center; 
    align-items: center;
    font-size: 15px;
}

#top-bar-idc a {
    color: #fff;
    font-weight: bold;
    text-decoration: none;
}

/* Marquee effect for the text */
#top-bar-idc .marquee-idc {
    white-space: nowrap;
    overflow: hidden;
    animation: marquee 25s linear infinite;
}

@keyframes marquee {
    0% {
        transform: translateX(100%);
    }
    100% {
        transform: translateX(-100%);
    }
}

#header {
    margin-top: 35px;
}